import 'package:flutter/material.dart';

import '../package_model_comm.dart';
import '../popupmenu/PopRoute.dart';

/*
 * @method: PopupWindow组件用例
 * @author: ZhongWb
 * @date: 2020/1/6 14:35
 * @description: PopupWindow气泡框  调用了PopupWindow面板
 **/
PopupWindow({BuildContext context,double boxLeftSize,double fontSize,boxShadow,double boxHeight1,Function onSelect,List<KeyValue> data,BoxBorder borderBox,double drop_downSize,Widget btn,Color downUpColor,double width,double height,Color bgColor,bool isBorder,Color fontColor}){

  GlobalKey _key = GlobalKey();
  double boxWidth = 100;//弹出框宽度
  double boxHeight = boxHeight1 ?? 130;//弹出框高度

  //数据为空时 插入模拟数据
  if(data==null){
    data = [];
    for(int i=1 ; i<=3 ;i++){
      KeyValue k = new KeyValue();
      k.keyVlaue ="value"+i.toString() ;
      k.keyName = "按钮"+i.toString();
      data.add(k);
    }
  }

  if(width==null) width=24;
  if(height==null) height=24;

  return GestureDetector(

    // 按钮
    child:Container(
      key: _key,
      width: width ,
      height: height,
      alignment: Alignment.center,
      child: btn ?? Icon(Icons.add,size: 24,color: Colors.grey,),
    ) ,
    onTap: () async {
      // 获取position
      RenderBox box = _key.currentContext.findRenderObject();

      // 获取整体位置
      Offset offset = box.localToGlobal(Offset(0,0));

      // 获取size
      Size size = box.size;

      //计算y的剩余高度
      double heightDy = MediaQuery.of(context).size.height - offset.dy;

      print("按钮的offset参数："+offset.toString());

      Navigator.of(context).push(PageRouteBuilder(
          barrierDismissible:true,
          opaque:false,
          barrierLabel: MaterialLocalizations.of(context).modalBarrierDismissLabel,
          barrierColor: Color.fromRGBO(255, 255, 255, 0.01),
          transitionDuration: const Duration(milliseconds: 150),
          pageBuilder: (p1, p2, p3) {
            return Popup(
              child:Stack(
                overflow: Overflow.visible,
                children: <Widget>[
                  //弹出框
                  Container(
                   
                    width: boxWidth,
                    padding: EdgeInsets.all(0),
                    child: ListView.builder(
                        shrinkWrap: true,
                      padding: EdgeInsets.all(0),
                      itemCount: data.length,
                      itemBuilder: (context,index){
                        return GestureDetector(
                          onTap: (){
                            print(index);
                            onSelect(data[index].keyVlaue);
                            Navigator.pop(context);
                          },
                          child: Container(
                              //false 不显示下边线
                            decoration:isBorder==false ? BoxDecoration() : BoxDecoration(
                              //最后一个元素 不显示下边线
                                border: Border(bottom: BorderSide(color:data.length-1==index?Colors.transparent:Color(0xff707070)))
                            ),
                            height: 40,
                            alignment: Alignment.center,
                            child: Text(data != null ? data[index].keyName: "功能${index+1}",style: TextStyle(color: fontColor ?? Colors.white,fontSize:fontSize ?? 12),),
                          ),
                        );
                      },
                    ),
                    decoration: BoxDecoration(
                      color: bgColor ?? Color(0xff4C4C4C),
                      borderRadius: BorderRadius.circular(5),
                      border: borderBox ?? Border.all(color: Colors.transparent),
                      boxShadow:boxShadow ?? []
                    ),
                  ),
                  //三角形
                  Positioned(
                    //顶部距离按钮小于 弹出框+按钮高度 隐藏 否则显示
                    top: heightDy < boxHeight + height + 10? null : -16,

                    //底部距离按钮大于 弹出框+按钮高度 隐藏 否则显示
                    bottom: heightDy > boxHeight + height + 10  ? null : -16,

                    //按钮右侧距离小于弹出框宽度 为null 否则 设置距离
                    right: offset.dx < boxWidth ? null:drop_downSize ?? 1.8,

                    left: offset.dx > boxWidth ? null:drop_downSize ?? 1.8,

                    // 上三角 下三角的切换
                    child: Icon(MediaQuery.of(context).size.height - offset.dy < boxHeight + height + 10? Icons.arrow_drop_down:Icons.arrow_drop_up,color:downUpColor ?? Color(0xff4C4C4C),size: 28,),
                  ),
                ],
              ),

              // 计算弹出框x轴位置
              left: offset.dx < boxWidth ? boxLeftSize ?? 7 :  offset.dx - (boxWidth-width-3),

              // 计算弹出框y轴位置
              top: heightDy< boxHeight + size.height + 10 ? offset.dy - (boxHeight+10) : offset.dy + size.height + 10,

              onClick: (){
                print("exit");
              },
            );
          }));
    },
  );
}


/*
 * @class Popup
 * @author: ZhongWb
 * @date: 2020/1/6 14:27
 * @description: PopupWindow气泡框面板-无内容,使用模态框+定位实现
 **/
class Popup extends StatelessWidget{
  final Widget child;
  final Function onClick; //点击child事件
  final double left; //距离左边位置
  final double top; //距离上面位置

  Popup({
    @required this.child,
    this.onClick,
    this.left,
    this.top,
  });

  @override
  Widget build(BuildContext context) {
    print(left);
    return Material(color: Colors.transparent, child: GestureDetector(child: Stack(
      children: <Widget>[
        Container(width: MediaQuery.of(context).size.width, height: MediaQuery.of(context).size.height, color: Colors.transparent,),
        Positioned(child: GestureDetector(child: child, onTap: (){ //点击子child
          if(onClick != null){
            Navigator.of(context).pop();
            onClick();
          }
        }),
          left: left,
          top: top,),
      ],
    ),
      onTap: (){ //点击空白处
        Navigator.of(context).pop();
      },
    ),);
  }

}